<template>
	<uni-popup ref="pRef" @change="change">
		<view class="contentBox">
			<image class="popup-close" src="@/static/common/icon_close.png" @click="$refs.pRef.close()" />
			<image src="@/static/common/icon_auth.png" class="popup-image"></image>
			<view class="popup-title">登录后才能使用此功能,是否跳转</view>
			<view class="button-group">
				<view class="button2" @click="$refs.pRef.close()"> 否 </view>
				<view class="button1" @click="$u.throttle(handleSubmit,2000)"> 是 </view>
			</view>
		</view>
	</uni-popup>
</template>
<script>
	export default {
		name: "toLogin",
		data() {
			return {
				show:false
			};
		},
		methods: {
			change(e) {
				this.show = e.show
				if (!this.show) {
					setTimeout(() => {
					}, 300)
				}
				//#ifdef H5
				if(this.show){window.history.pushState(null, null, '10')
				}else{}
				//#endif
			},
			handleSubmit(){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			},
			open() {
				this.$refs.pRef.open()
			},
			close(){
				this.$refs.pRef.close()
			}
		}
	}
</script>
<style lang="scss">
	.contentBox {
		width: 90vw;
		min-height: 440rpx;
		box-sizing: border-box;
		padding: 38rpx 44rpx 82rpx;
		box-shadow: 0rpx 4rpx 32rpx 0rpx #FFF0FD;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #FFDAF5 0%, #FFFFFF 20%);
		position: relative;
		text-align: center;

		.popup-close {
			position: absolute;
			right: 0;
			top: -120rpx;
			width: 88rpx;
			height: 88rpx;
		}

		.popup-image {
			margin-top: 60rpx;
			width: 412rpx;
			height: 316rpx;
		}

		.popup-title {
			font-weight: 600;
			font-size: 34rpx;
			color: #323334;
			text-align: center;
		}

		.popup-tips {
			margin-top: 18rpx;
			font-size: 28rpx;
			color: #9A9A9A;
		}

		.button-group {
			margin-top: 68rpx;
			display: flex;
			grid-gap:20rpx;
			
			.button1 {
				flex:1;
				line-height: 88rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
				border-radius: 44rpx;
			}
			.button2{
				flex:1;
				line-height: 88rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #FE93BF;
				text-align: center;
				border:1rpx solid #FE93BF;
				border-radius: 44rpx;
			}
		}
	}
</style>